<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图查询</title>

    <!-- 设置样式 -->
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <!-- 引用ESRI提供的样式表。esri.css样式表主要用于ESRI提供的小部件与组件（例如地图、信息框）。 -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css">

    <!-- 引用ArcGIS API for JavaScript -->
    <script src="https://js.arcgis.com/4.16/"></script>

    <!-- link标签是用于当前文档引用外部文档的，其次，这个标签的rel属性用于设置对象和链接目的间的关系 href 属性规定链接的目标：
    <img> 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。 
    <script> 标签  src 属性规定外部脚本文件的URL -->

    <script>
        var map = null;
        /*以下资源，需要Dojo提供的全局require函数加载，require函数需要两个参数，第一个参数是依赖项，第2个参数是一个回调函数，
        第1个参数又包括两类，一类是真正的依赖项，另一类是插件，例如 "dojo/dom"、"dojo/fx"、"dojo/domReady!"
        第2个参数 */
        require([
            "esri/Basemap",
            "esri/Graphic",
            "esri/PopupTemplate",
            "esri/Map",
            "esri/core/Handles",
            "esri/core/urlUtils",
            "esri/core/watchUtils",
            "esri/layers/BaseTileLayer",
            "esri/layers/Layer",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/layers/MapImageLayer",
            "esri/layers/support/TileInfo",
            "esri/layers/TileLayer",
            "esri/geometry/Extent",
            "esri/geometry/geometryEngine",
            "esri/geometry/projection",
            "esri/geometry/Polygon",
            "esri/geometry/SpatialReference",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/tasks/GeometryService",
            "esri/tasks/QueryTask",
            "esri/tasks/support/Query",
            "esri/widgets/Slider",
            "esri/views/draw/Draw",
            "esri/views/MapView",
            "esri/views/2d/layers/BaseLayerView2D",
        ], function(Basemap, Graphic, PopupTemplate, Map, Handles, urlUtils, watchUtils, BaseTileLayer, Layer, FeatureLayer, GraphicsLayer, MapImageLayer, TileInfo, TileLayer, Extent, geometryEngine, projection, Polygon, SpatialReference, SimpleLineSymbol, SimpleMarkerSymbol,
            GeometryService, QueryTask, Query, Slider, Draw, MapView, BaseLayerView2D) {
            //创建地图与加入地图
            var map = new Map({
                basemap: "hybrid"
            });

            //为了使地图在DOM中对用户可见，必须创建一个Map实例和一个DOM元素。分别在map和container属性中设置。
            var view = new MapView({
                container: viewDiv,
                map: map,

                //设置比例尺 view.scale=24000;

                // 在视图上设置范围
                extent: {
                    xmin: -9177811,
                    ymin: 4247000,
                    xmax: -9176791,
                    ymax: 4247784,
                    spatialReference: 102100
                }
            });
            //添加要素图层
            var featureLayer = new FeatureLayer({
                url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
            });
            map.add(featureLayer);
        });
    </script>

</head>

<body>
    <!-- <table border="1px" align="center" bgcolor="#ff9999">
        <tr>
            <th>选择地点</th>
        </tr>
        <tr>
            <td>未知</td>
        </tr>
    </table> -->


    <!-- <div>元素，用于显示地图， -->
    <div id="viewDiv"></div>

</body>

</html>

<!--
    var fillSymbol = {
                        type: "simple-fill",
                        color: [227, 139, 79, 0.8],
                        outline: {
                            color: [255, 255, 255],
                            width: 1
                        }
                    };
                    var graphic = new Graphic({
                        geometry: feature.geometry,
                        symbol: fillsymbol
                    });
                    view.graphics.add(graphic);
-->